<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <footer-button :buttons="state.buttons" />
            <a-form ref="formRef" :model="modelForm.data" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t(`contentManage.label.category`)" :label-col="{span: 6}">
                    <div>{{modelForm.data.category}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="16">
                  <a-form-item :label="t(`contentManage.label.lastModified`)" :label-col="{span: 9}">
                    <div style="width:100%">{{modelForm.data.updateTime}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-item :label="t(`contentManage.label.explain`)" :label-col="{span: 2}" :wrapper-col="{span: 24}">
                    <div>{{modelForm.data.explains}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item :label="t(`contentManage.label.title`)" :wrapper-col="{span: 18}">
                <a-input :maxlength="100" v-model:value="modelForm.data.title" placeholder="请输入标题" />
              </a-form-item>
              <a-form-item :label="t(`contentManage.label.informationContent`)" :wrapper-col="{span: 24}">
                <TinyMCE v-model:value="modelForm.data.contentDetail"/>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script>
import TinyMCE from '@/component/tinymce';

import { save, update, details } from "@/api/module/content-manage"
import {defineComponent, reactive, toRaw, ref, onActivated} from 'vue';
import { Form, message, modal } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const useForm = Form.useForm;

export default defineComponent({
  name: "content-manage-add",
  components: {
    TinyMCE
  },
  setup() {

    const { t } = useI18n();
    const formRef = ref()
    const router = useRouter()
    const route = useRoute()

    const state = reactive({
      buttons: [
        {
          name: "save",
          event: () => onSubmit(),
          type: "primary",
          code: "",
        },
        {
          name: "reset",
          event: () => resetForm(),
          code: "",
        },
      ]
    })
    const resetForm = () => {
      formRef.value.resetFields()
      modelForm.data = {}
    };

    const modelForm = reactive({
      data: {
        name: '',
      }
    });

    const formRules = reactive([])
    const { resetFields, validate, validateInfos } = useForm(
      modelForm.data,
      formRules
    );

    const onSubmit = () => {
      formRef.value.validate().then(() => {
        const result = toRaw(modelForm.data);
        if (result.id) {
          update(result)
            .then((res) => {
              if (res.success) {
                message
                  .success({ content: "保存成功", duration: 1 })
                  .then(() => {
                    router.push({
                      path: "/system/content-manage",
                    });
                    formRef.value.resetFields();
                    modelForm.data = {}
                  });
              } else {
                message.warning({ content: "保存失败", duration: 1 });
              }
            })
            .catch((err) => {
              console.log("err: ", err);
              message.warning({ content: "保存失败", duration: 1 });
            });
        } 
        // else {
        //   save(result)
        //     .then((res) => {
        //       if (res.success) {
        //         message
        //           .success({ content: "保存成功", duration: 1 })
        //           .then(() => {
        //             router.push({
        //               path: "/system/content-manage",
        //             });
        //             formRef.value.resetFields();
        //           });
        //       } else {
        //         message.warning({ content: "保存失败", duration: 1 });
        //       }
        //     })
        //     .catch((err) => {
        //       message.warning({ content: "保存失败", duration: 1 });
        //     });
        // }
      });
    };

    const loading = ref(false);
    // 获取详情
    const getDetails = (id) => {
      if (!id) return;
      return details({ id }).then((res) => {
        if (res.success) {
          modelForm.data = reactive({
            ...modelForm.data,
            ...res.data,
          });
        }
      });
    };
    onActivated(() => {
      const result = route.query;
      if (result && result.id) {
        getDetails(result.id);
      } else {
        modelForm.data = {};
        formRef.value.resetFields();
      }
    });
    return {
      t,
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 6,
      },
      formRef,
      state,
      modelForm,
      formRules,
      resetFields,
      validateInfos,
      onSubmit,
      loading,
    };
  },
})
</script>

<style lang="less" scoped>
.upload-title {
  font-size: 14px;
  color: #b7b7b7;
}
</style>
